<template>
<view class="content">
	<!-- 积分币 -->
	<view class="integralCurrency">
		<image :src="`${prefix_image}/homepage/IntegralRecord/IntegralCurrency.png`" />
		<view class="integralCurrency-number">16289</view>
	</view>
	<!-- 积分收支明细和积分兑换记录tab和内容 -->
	<view class="integral-content">
		<view class="integral-tab">
			<view 
				v-for="(item, index) in integralTab"
				class="integral-tab-view"
				:class="{ active: index === integralTabNumer}"  
				:key="index"
				@tap="tabClick(index)"
			>
				{{item}}
				<view class="integralTabBorderOuter">
					<view :class="{integralTabBorder: index === integralTabNumer}"></view>
				</view>
			</view>
		</view>
		
		<view class="integral-tab0-content" v-show="integralTabNumer === 0">
			<!-- 积分收支明细内容tab -->
			<view class="integral-tab0-tabOuter">
				<view 
					class="integral-tab0-tabOuter-tab" 
					v-for="(item, index) in integralDetailTab"
					:class="{active: integralDetailTabNumer === index}"
					@tap="integralTabClick(index)"
					:key="index"
				>
					{{item}}
				</view>
			</view>
			<!-- 积分收支明细内容 -->
			<view class="integral-tab0-list" 
				v-for="(item, index) in integralTab0list"
				:key="index"		
			>
				<view class="integral-tab0-list-left">
					<text class="integral-tab0-list-title">
						{{item.title}}
					</text>
					<text class="integral-tab0-list-time">
						{{item.time}}
					</text>
				</view>
				
				<view class="integral-tab0-list-number">{{item.number}}</view>
			</view>
		</view>
		
		<view class="integral-tab1-content" v-show="integralTabNumer === 1">
			<view class="integral-tab1-content-list">
				<text class="integral-tab1-content-time-title">2021年8月</text>
				<view class="integral-tab1-content-view">
					<!-- <view class="integral-tab1-content-img-view"> -->
						<image mode="scaleToFill" :src="`${prefix_image}/homepage/IntegralRecord/IntegralCurrency.png`" />
					<!-- </view> -->
					<view class="integral-tab1-content-text-view">
						<view class="integral-tab1-content-sellTitle">宝路狗粮 成犬中小型犬粮4kg牛宝路狗粮 成犬中小型犬粮4kg牛</view>
						<view class="integral-tab1-content-sellPrice">价格：2690积分</view>
						<view class="integral-tab1-content-sellTime">时间：2021.12.05 17:27:</view>
					</view>
				</view>
				<view class="integral-tab1-content-view">
					<!-- <view class="integral-tab1-content-img-view"> -->
						<image mode="scaleToFill" :src="`${prefix_image}/homepage/IntegralRecord/IntegralCurrency.png`" />
					<!-- </view> -->
					<view class="integral-tab1-content-text-view">
						<view class="integral-tab1-content-sellTitle">宝路狗粮 成犬中小型犬粮4kg牛宝路狗粮 成犬中小型犬粮4kg牛</view>
						<view class="integral-tab1-content-sellPrice">价格：2690积分</view>
						<view class="integral-tab1-content-sellTime">时间：2021.12.05 17:27:</view>
					</view>
				</view>
			</view>
			<view class="integral-tab1-content-list">
				<text class="integral-tab1-content-time-title">2021年8月</text>
				<view class="integral-tab1-content-view">
					<!-- <view class="integral-tab1-content-img-view"> -->
						<image mode="scaleToFill" :src="`${prefix_image}/homepage/IntegralRecord/IntegralCurrency.png`" />
					<!-- </view> -->
					<view class="integral-tab1-content-text-view">
						<view class="integral-tab1-content-sellTitle">宝路狗粮 成犬中小型犬粮4kg牛宝路狗粮 成犬中小型犬粮4kg牛</view>
						<view class="integral-tab1-content-sellPrice">价格：2690积分</view>
						<view class="integral-tab1-content-sellTime">时间：2021.12.05 17:27:</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue"
import config from '@/hooks/useConfig.js'
const { prefix_image }=config()
export default defineComponent({
	setup() {
		const data = reactive({
			"integralTab": ["积分收支明细", "积分兑换记录"],
			"integralTabNumer": 0,
			"integralDetailTab": ["全部", "已获取", "已使用"],
			"integralDetailTabNumer": 0,
			
			"integralTab0list":[{
				title: "视频识别打卡任务",
				time: "2021.12.05 17:27:36",
				number: "+16"
			}],
			
			"integralTab1list": [{
				
			}]
		})
		
		// 积分收支明细和积分兑换记录tab
		const tabClick = (index) => {
			data.integralTabNumer = index
		}
		
		const integralTabClick = (index) => {
			data.integralDetailTabNumer = index
		}
		return {
			...toRefs(data),
			tabClick,
			integralTabClick,
			prefix_image
		}
	}
})
	
</script>
<style lang="stylus" scoped>
.content{
	padding: 0px 32rpx;
	background: #F6F6F7;
	height:100vh;
	.integralCurrency{
		display: flex;
		padding-top: 28rpx;
		align-items:center;
		image{
			width:54rpx;
			height: 54rpx;
		}
		.integralCurrency-number{
			font-size: 64rpx;
			font-weight: bold;
			color: #111111;
			line-height: 96rpx;
			padding-left: 12rpx;
		}
	}
}

.integral-content{
	background: #FFFFFF;
	border-radius: 32rpx 32rpx 32rpx 32rpx;
	padding-bottom: 36rpx;
	.integral-tab{
		display:flex;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1)
		.integral-tab-view{
			text-align: center;
			font-size: 36rpx;
			font-weight: 400;
			color: #333333;
			flex:1;
			height: 106rpx;
			line-height: 106rpx;
		}
		.active{
			font-weight: bold;
			color: #333333;
		}
		.integralTabBorderOuter{
			display:flex;
			justify-content: center;
			margin-top:-8rpx;
			.integralTabBorder{
				width: 90rpx;
				height: 8rpx;
				background: #FFD300;
				border-radius: 6rpx;
			}
		}
		
	}
	// 第一个tab下面的内容	
	.integral-tab0-content{
		padding-top: 44rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;
		.integral-tab0-tabOuter{
			display:flex;
			.integral-tab0-tabOuter-tab{
				width: 144rpx;
				height: 60rpx;
				background: #F4F4F4;
				border-radius: 32rpx;
				text-align:center;
				line-height:60rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				margin-right: 24rpx;
			}
			.active{
				background: #FFD300;
				color: #111111;
			}
		}
		.integral-tab0-list:last-of-type{
			border : 0px;
			padding-bottom: 0rpx;
		}
		.integral-tab0-list{
			display:flex;
			padding-top: 48rpx;
			align-items:center;
			border-bottom : 1rpx solid rgba(0, 0, 0, 0.1);
			padding-bottom: 36rpx;
			.integral-tab0-list-left{
				display: flex;
				flex-direction: column;
				flex: 1;
				
				.integral-tab0-list-title{
					font-size: 32rpx;
					font-weight: 400;
					color: #333333;
					// line-height: 45rpx;
					padding-bottom 14rpx;
				}
				.integral-tab0-list-time{
					font-size: 24rpx;
					font-weight: 400;
					color: #B2B2B2;
					// line-height: 24px;
				}
			}
			.integral-tab0-list-number{
				font-size: 32rpx;
				font-weight: 600;
				color: #333333;
				// padding-right: 32rpx;
			}
			
		}
	}
	
	
	.integral-tab1-content{
		padding-top: 44rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;
		.integral-tab1-content-list:first-of-type{
			padding-top:0rpx;
		}
		.integral-tab1-content-list{
			padding-top: 36rpx;
			.integral-tab1-content-time-title{
				font-size: 32rpx;
				font-weight: 400;
				color: #333333;
			}
			.integral-tab1-content-view:first-of-type{
				margin-top: 14rpx;
			}
			.integral-tab1-content-view{
				background: #F7F7F7;
				border-radius: 16rpx;
				display: flex;
				padding: 12rpx;
				margin-top: 24rpx;

				// .integral-tab1-content-img-view{
					image{
						width: 144rpx;
						height: 144rpx;
						border-radius: 12rpx;
						border: 1rpx solid rgba(0, 0, 0, 0.05);
						
					}
				// }
				.integral-tab1-content-text-view{
					flex:1;
					padding: 14rpx 0rpx 14rpx 16rpx;
					.integral-tab1-content-sellTitle{
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
						
						font-size: 28rpx;
						// font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						
					}
					.integral-tab1-content-sellPrice{
						font-size: 24rpx;
						// font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						padding-top: 14rpx;
					}
					.integral-tab1-content-sellTime{
						font-size: 24rpx;
						// font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						padding-top: 14rpx;
					}
				}
			}
		}
	}
}
</style>
